<!doctype html>
<html>
<head>

	<title>My First Page</title>
		
	<link rel="stylesheet" type="text/css" href="css\semantic.min.css" />
    <link rel="stylesheet" type="text/css" href="css\home.css" />
	<script type="text/javascript" src="js\jquery.min.js"></script>
	<script type="text/javascript" src="javascript\semantic.min.js"></script>
</head>
<body>

    <div class="two column ui page grid">
    
        <div class="ten wide column">
            <div class="ui segment">
                <div class="ui header">Canvas</div>
                <div class="content">
                
                    <canvas id="myCanvas" width="600px" height="400px"></canvas>
                </div>
            </div>

            <div class="ui segment">
                <div class="ui header">Command</div>
                <div class="content">
                    <div class="ui fluid action input">
                    <input type="text" id="command">
                    <div class="ui icon button" id="exec"><i class="play icon"></i></div>
                    </div>
                </div>
            </div>

        </div>

        <div class="six wide column">
            
            <div class="ui message segment" id="syn">
                <div class="ui header">Syntax of Command</div>
                <div class="content">This area will Show Syntax of Command</div>
            </div>
            <div class="ui message segment" id="doc">
                <div class="ui header">Docstring Area</div>
                <div class="ui content">This area Shows docstring of Command</div>
            </div>

            <div class="ui message segment" id="log">

                <div class="ui header">Log</div>

                <div class="content" id="msg">
                    <p>Your Messages Appear Here</p>
                </div>

            </div>
        </div>

    </div>
    
    <script type="text/javascript" src="javascript\home.js"></script>
</body>
</html>
